<template>
  <div ref="chart" class="chart"></div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useChart } from '../../hooks/useChart';
const chart = ref();
const { setOptions } = useChart(chart);
const option = {
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisLabel: {
      color: '#DCECFF'
    },
    data: ['数据', '数据', '数据', '数据', '数据', '数据', '数据']
  },
  yAxis: {
    type: 'value',
    splitLine: { show: false },
    axisLabel: {
      color: '#DCECFF'
    }
  },
  series: [
    {
      name: 'Highest',
      type: 'line',
      data: [50, 38, 85, 20, 60, 50, 40],
      symbolSize: 10,
      symbol: 'circle',
      lineStyle: {
        color: "#FEFF84",
        width: 3
      },
      itemStyle: {
        color: '#fff',
        borderColor: "#FEFF84",
        borderWidth: 3
      }
    },
    {
      name: 'Lowest',
      type: 'line',
      data: [10, 65, 20, 50, 90, 30, 60],
      symbol: 'circle',
      symbolSize: 10,
      lineStyle: {
        color: "#FFA184",
        width: 3
      },
      itemStyle: {
        color: '#fff',
        borderColor: "#FFA184",
        borderWidth: 3
      }
    }
  ]
};
const initChart = () => {
  setOptions(option);
};

onMounted(() => {
  initChart();
});
</script>